<!--
  ===== Todo @windows-desktop =====
  
  >> Tauri初体验 - 包括tailwindcss的安装
   https://blog.csdn.net/qq285744011/article/details/147538290

  >> 开源项目by Tauri
    https://github.com/tauri-apps/awesome-tauri
    https://github.com/probablykasper/mr-tagger

  >> 图标
    https://blog.csdn.net/weixin_46329670/article/details/129004331  

  >> 标题
    https://tauri.app/zh-cn/learn/window-customization/
    https://tauri.app/zh-cn/reference/config/#title-1

  >> 打开 web 检查器 - 调试台 - 开发者工具 - 日志查看
    [windows] Ctrl + Shift + I
    https://tauri.app/zh-cn/develop/#打开-web-检查器
   

  >> 使用npm包 - 安装tailWindCss - 配置
    https://tailwind.org.cn/docs/installation/using-vite

  >> 使用npm包 - 安装wangeditor - 配置
    https://www.wangeditor.com/v5/for-frame.html#vue3

  >> 官方专用ajax、axios - 官方插件 HTTP 客户端
    https://tauri.app/zh-cn/plugin/http-client/
    安装时，会问：? Choose which capabilities to add the permission `http:default` to: › 建议都勾选！

    【为什么tauri不建议直接使用npm的axios？】 参考 https://blog.csdn.net/weixin_44786530/article/details/135729261 的评论
    官方那个http主要解决跨域的问题，打包之后，tauri的webview运行在tauri://协议下，访问后端接口将会产生跨域问题，如果需要正常请求到接口，后端api需要把tauri://添加到允许跨域名单中，不然请求不到数据。后端吧tauri://添加到允许名单中，是有风险的。而使用官方的http插件，因为是rust发送的请求，所以不会有跨域问题。另外社区有axios适配器，可以无缝整合axios。
    


  >> 图片上传


  >> 展示mac风格 @win


  >> 内部风格 - 手动切换
  >> 内容读取 - 写入图片 - 文件管理、json缓存
  >> 窗口置顶
  >> 后台接口 内置到Tauri
  >> 多窗口 通讯
  

-->

<template>
  <main>
    <div class="h-screen flex flex-col">
      <div class="grow-0">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="pd.toolbarConfig"
          :mode="pd.mode"
        />
      </div>
      <div class="grow">
        <Editor
          style="height: 100%; overflow-y: hidden;"
          v-model="pd.html"
          :defaultConfig="pd.editorConfig"
          :mode="pd.mode"
          @onCreated="editorOnCreated"
        />
      </div>
    </div>
  </main>
</template>

<style>
  .w-e-text-container {
      background: linear-gradient(to bottom, #E4EFE0 0%, #FFFFFF 90%);
  }
  .w-e-toolbar {
    /* background-color: transparent; */
    /* background-image: linear-gradient(181.2deg, rgb(181, 239, 249) 10.5%, rgb(254, 254, 254) 86.8%); */
    /* background: #b5eff9; */
  }
</style>


<script setup>
/**
 * wangeditor
 * https://www.wangeditor.com/v5/for-frame.html#vue3
 * 
 * Tauri axios
 * https://tauri.app/zh-cn/plugin/http-client/
 * 
 */

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import { fetch } from '@tauri-apps/plugin-http';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const pd = reactive({
  html: '<p>hello</p>',
  toolbarConfig: {},
  editorConfig: {
    placeholder: '请输入内容...'
  },
  mode: 'default', // simple、default
});

const editorOnCreated = (editor) => {
  editorRef.value = editor
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

onMounted(()=>{
  
})

</script>
